<template>
  <Modal
    v-model="showModal"
    width="80%"
    id="ban-history-data"
    class="hide-zindex-model"
    :ok-text="$t('views.public.sure')"
    :cancel-text="$t('views.public.cancel')"
    :title="$t('views.user_data.banHistoryTitle')">
    <div class="ban-history">
      <div class="tableBox">
        <tableBox :columns="titleList" :list="tablesList" :loading="false">
          <div slot="operator_role" slot-scope="{ item }">
            <span v-if="item.operator_role === 1">{{ $t('views.user_data.roleText1') }}</span>
            <span v-if="item.operator_role === 2">{{ $t('views.user_data.roleText2') }}</span>
            <span v-if="item.operator_role === 3">{{ $t('views.user_data.roleText3') }}</span>
          </div>
          <div slot="operate" slot-scope="{ item }">
            {{ operateArr[item.operate - 1] }}
          </div>
        </tableBox>
      </div>
      <div class="page">
        <Page show-elevator :current="pn" :total="total" :page-size="page" @on-change="changePage"></Page>
      </div>
    </div>
  </Modal>
</template>

<script>
  import tableBox from '@/components/Table/VueTable.vue'
  import tableSearch from '@/components/Table/TableSearch.vue'
  import until from '@/js/until.js'
  import { mapGetters } from 'vuex'
  import operateType from '../../view/questionStatistics/operateType.js';
  const getLoading = until.globleLoading();

  export default {
    components: {
      tableBox,
      tableSearch,
    },
    props: {
      value: {
        type: Boolean,
        default: false,
      },
      itemData: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    data() {
      return {
        total: 0,
        keyword:'',
        pn: 1,
        page: 10,
        tablesList: [],
        titleList: this.getTitleList(),
        oldUser_id: null,
        aboutCheck: {
          checkAll: false,
          checkAllGroup: [],
        },
        aboutBan: {
          checkBan: false,
          showType: '',
        },
        handleParams: {
          modalBanOkClick: {},
        },
        showModal: this.value,
        operateArr: operateType.getTypeArr.call(this),
      };
    },
    computed: {
      ...mapGetters([
        'getLocale',
      ]),
    },    
    created() {
      this.getList();
    },
    methods: {
      timestampTime(data) {
        return until.timestampTime(data)
      },      
      getTitleList() {
        return [
          {
            title: this.$i18n.tc('views.user_data.table2Text2'),
            key: 'operate',
            type: 'custom'
          },          
          {
            title: this.$i18n.tc('views.user_data.table2Text3'),
            key: 'operation_reason',
          },
          {
            title: this.$i18n.tc('views.user_data.table2Text4'),
            key: 'remarks',
          },          
          {
            title: this.$i18n.tc('views.user_data.table2Text6'),
            key: 'create_time',
          },
          {
            title: this.$i18n.tc('views.user_data.table2Text7'),
            key: 'operator_role',
            type: 'custom',
          },                         
          {
            title: this.$i18n.tc('views.user_data.table2Text8'),
            key: 'operate_username',
          },
        ];
      },
      // 转换时间
      timestampToTime(data) {
        return until.timestampToTime(data)
      },
      modalBanOkClick(data) {
        this.handleParams.modalBanOkClick = data;
        if (this.aboutBan.showType === 'all') this.handleBanAll();
        else if (this.aboutBan.showType === 'path') this.handleBlockPath();
      },
      // 切换页码
      changePage(pn) {
        this.pn = pn
        this.getList(true)
      },
      // 数据请求
      getList(scrollTopFlag) {
        return this.$http.memberHistoryList({
          page: this.page,
          pn: this.pn,
          operated_object: this.itemData.user_no,
        }, {
          method: this.getList,
          that: this,
          scrollTopFlag,
        }).then((res) => {
          if (Number(res.status) == 200) {
            this.tablesList = res.list;
            this.total = res.total;
          } else {
            this.tablesList = []
            this.total = 0
            this.$Message.error(res.msg)
          }
        })
      }
    },
    watch: {
      getLocale: function() {
        this.titleList = this.getTitleList();
        this.operateArr = operateType.getTypeArr.call(this);
      },
      showModal: function(newVal) {
        this.$emit('input', newVal);
      },
      value: function(newVal) {
        this.showModal = newVal;
      },
    },    
  }
</script>
<style scoped lang="scss">
  @function r($px) {
    @return $px/100*1rem;
  }
  .btn-item {
    margin: 2px;
  }
  @media screen and (max-width: 759px) {
    .ban-history {
      & >>> .actionBox {
        font-size: 0;
        text-align: left;
      }
    }
  }
</style>
